<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})

const list = ref([
  {
    icon: 'https://public-oss-file.zmaxfilm.com/website-compress/join-3.png',
    title: '文化创新，科技生活',
    content: '中瑞集团致力于文化产业和科技产业投资建设，步形成覆盖文化科技板块、福利营销板块、文化投资板块的产业布局。坚持秉承“引领文化产业科技创新”的宗旨，助力国家、地方文化科技产业的蓬勃发展',
  }, {
    icon: 'https://public-oss-file.zmaxfilm.com/website-compress/join-4.png',
    title: '用心关心每个员工的成长',
    content: '这里有完善的培训计划和晋升体系，以及灵活的内部转岗机制。关注每个员工的学习与成长，帮助每个员工不断进步，成为更好的自己 。 ',
  }, {
    icon: 'https://public-oss-file.zmaxfilm.com/website-compress/join-5.png',
    title: '完善的薪酬福利机制',
    content: '完善的薪酬激励体系和个性化的员工福利，真诚回馈每个员工的努力和付出。',
  },
])
function onEnter(el: any, done: any) {
  el.style.opacity = 0
  const delay = el.dataset.index * 100
  const animation = 'fadeInRight 0.8s infinite'
  setTimeout(() => {
    el.style.transition = 'opacity 0.8s '
    el.style.opacity = 1
    el.style.animation = animation
    el.style['animation-iteration-count'] = 1
    done()
  }, delay)
}
</script>

<template>
  <div id="xzzr" ref="el" class="xuanzhezhongrui">
    <div class="content">
      <Transition name="animate-zoomIn">
        <h1 v-show="show" class="line-center-title">
          选择中瑞
        </h1>
      </Transition>
      <div class="list">
        <transition-group @enter="onEnter">
          <div v-for="(item, index) in list" v-show="show" :key="index" class="card" :data-index="index">
            <img class="img" :src="item.icon">
            <span class="title">{{ item.title }}</span>
            <span class="text">{{ item.content }}</span>
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.xuanzhezhongrui {
  min-height: 600px;
  padding-top: 50px;
  padding-bottom: 80px;
  background-color: #FAFAFA;

  .content {
    width: 1200px;
    margin: 0 auto;

    .list {
      gap: 20px;
      display: flex;

      .card {
        flex: 1;
        height: 420px;
        display: flex;
        padding: 32px;
        align-items: center;
        border-radius: 20px;
        flex-direction: column;
        background: #FFFFFF;

        .img {
          width: 68px;
          height: 68px;
        }

        .title {
          margin: 20px 0;
          font-size: 24px;
          font-weight: bold;
          position: relative;

          &::after {
            left: 50%;
            bottom: -10px;
            width: 224px;
            height: 2px;
            content: "";
            position: absolute;
            transform: translateX(-50%);
          }
        }

        &:nth-child(1) .title::after {
          background-color: #2998FF;
        }

        &:nth-child(2) .title::after {
          background-color: #FE8C46;
        }

        &:nth-child(3) .title::after {
          background-color: #6EE2D8;
        }

        .text {
          font-size: 18px;
          font-weight: 500;
          color: #999999;
          line-height: 36px;
          text-align: center;
        }
      }
    }
  }

  .line-center-title {
    font-family: PangMenZhengDaoBiaoTiTi;
    margin-bottom: 40px;
  }
}
</style>
